import React, { Component ,lazy,Suspense} from 'react'
import {Route,NavLink,Redirect} from 'react-router-dom'
// import News from './News/News'
// import Msg from './Msg/Msg'
//路由懒加载
const News = lazy(()=>import('./News/News'))
const Msg = lazy(()=>import('./Msg/Msg'))

export default class Home extends Component {
  render() {
    return (
      <div>
        <NavLink to="/news" style={{marginRight:'20px'}} >news</NavLink>
        <NavLink to="/msg" >msg</NavLink>
        <div style={{height:'20px'}}></div>
        {/* Suspense当懒加载组件长时间未加载完成时用Suspense指定一个显示的内容 */}
        <Suspense fallback={<h2>Loading......</h2>}>
          <Route path='/news' component={News}></Route>
          <Route path='/msg' component={Msg}></Route>
          <Redirect to='/msg'></Redirect>
        </Suspense>
      </div>
    )
  }
}
